<template>
  <div v-show="showFood" class="food" ref="food">
    <div class="food-wrapper">
      <div class="image-wrapper">
        <img :src="food.image">
        <div class="back" @click="hide">
          <i class="icon-arrow_lift"></i>
        </div>
      </div>
      <div class="food-content">
        <h1 class="title">{{food.name}}</h1>
        <div class="desc">
          <span class="sell-count">月售{{food.sellCount}}份</span>
          <span class="rating">好评率{{food.rating}}%</span>
        </div>
        <div class="price">
          <span class="cur-price"><i>￥</i>{{food.price}}</span>
          <span v-show="food.oldPrice" class="old-price"><i>￥</i>{{food.oldPrice}}</span>
        </div>
        <div class="add-cart" @click.stop.prevent="addFirst" v-show="food.count===0 || !food.count">加入购物车</div>
        <div class="cartcontrol-wrapper">
          <cart-control :food="food"></cart-control>
        </div>
      </div>
      <split v-show="food.info"></split>
      <div class="food-desc" v-show="food.info">
        <h2 class="title">商品介绍</h2>
        <p class="info">{{food.info}}</p>
      </div>
      <split></split>
      <div class="rating-header">
        <h1 class="title">商品评价</h1>
        <rating-select
          :selectType="selectType"
          :onlyContent="onlyContent"
          :desc="desc"
          :ratings="food.ratings"
          @changeType="toggleTypeClick"
          @hasContent="toggleContentClick"
          ></rating-select>
      </div>
      <div class="rating-content" v-show="food.ratings && food.ratings.length">
        <div v-show="needShow(item.rateType,item.text)" class="content-wrapper border-1px" v-for="(item,index) of food.ratings" :key="index">
          <div class="header">
            <span class="date">{{item.rateTime | formatDate}}</span>
            <span class="user">{{item.username}}</span>
            <div class="avatar">
              <img :src="item.avatar">
            </div>
          </div>
          <div class="content">
            <i :class="{'icon-thumb_up':item.rateType===0,'icon-thumb_down':item.rateType===1}"></i>
            <span class="rating">{{item.text}}</span>
          </div>
        </div>
      </div>
      <div class="no-rating" v-show="!food.ratings || !food.ratings.length">
        暂无评价
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import CartControl from 'components/cartcontrol/CartControl'
import Split from 'components/split/Split'
import RatingSelect from 'components/ratingselect/RatingSelect'
import { formatDate } from 'common/js/date'
// const POSITIVE = 0
// const NEGATIVE = 1
const ALL = 2
export default {
  name: 'Food',
  props: {
    food: {
      type: Object
    }
  },
  components: {
    CartControl,
    Split,
    RatingSelect
  },
  data () {
    return {
      showFood: false,
      selectType: ALL,
      onlyContent: true,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  methods: {
    show () {
      this.showFood = true
      this.selectType = ALL // 把选择状态置为 全部
      this.onlyContent = true // 把查看有内容的评价置为 true
    },
    hide () {
      this.showFood = false
    },
    addFirst () {
      Vue.set(this.food, 'count', 1)
    },
    toggleTypeClick (type) { // 接收子组件传递的selectType值
      this.selectType = type
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    },
    toggleContentClick (hasContent) {
      this.onlyContent = hasContent
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    },
    needShow (type, text) {
      if (this.onlyContent && !text) {
        return false
      }
      if (this.selectType === ALL) {
        return true
      } else {
        return this.selectType === type
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.food, {
      click: true
    })
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd HH:mm')
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~common/styles/mixins.styl'
  @import '~common/styles/varibles.styl'
  .food
    z-index 30
    position fixed
    top 0
    left 0
    right 0
    bottom 48px
    background-color #f3f5f7
    .image-wrapper
      position relative
      width 100%
      height 0
      padding-bottom 100%
      img
        position absolute
        top 0
        left 0
        width 100%
        height 100%
      .back
        position absolute
        top 10px
        left 10px
        padding 10px
        border-radius 50%
        background-color rgba(0,0,0,0.7)
        .icon-arrow_lift
          font-size 20px
          color #fff
    .food-content
      position relative
      padding 18px
      background-color #fff
      .title
        line-height 14px
        font-size 14px
        font-weight 700
        color rgb(7,17,27)
      .desc
        line-height 10px
        margin 8px 0 18px 0
        font-size 0
        color rgb(147,153,159)
        .sell-count
          margin-right 12px
          font-size 10px
        .rating
          font-size 10px
      .price
        .cur-price
          line-height 14px
          font-size 14px
          color rgb(240,20,20)
          font-weight 700
          margin-right 8px
          i
            font-size 10px
            font-weight normal
        .old-price
          line-height 14px
          font-size 10px
          font-weight 700
          color rgb(147,153,159)
          text-decoration line-through
          i
            font-weight normal
      .add-cart
        z-index 10
        position absolute
        right 18px
        bottom 18px
        padding 6px 12px
        font-size 10px
        line-height 12px
        border-radius 12px
        color #fff
        background-color rgb(0,160,220)
      .cartcontrol-wrapper
        position absolute
        right 12px
        bottom 12px
    .food-desc
      // margin 18px 0
      padding 18px
      background-color #fff
      .info
        padding 6px 8px
        line-height 24px
        font-size 12px
        font-weight 200
        color rgb(77,85,93)
    .rating-header
      background-color #fff
      .title
        font-size 14px
        padding-top 18px
        margin-left 18px
    .rating-content
      background-color #fff
      .content-wrapper
        position relative
        padding 16px 0
        margin 0 16px
        border-1px(rgba(7,17,27,0.1))
        .header
          .date
            vertical-align top
            line-height 12px
            font-size 10px
            color rgb(147,153,159)
          .user
            position absolute
            vertical-align top
            top 16px
            right 22px
            line-height 12px
            font-size 10px
            color rgb(147,153,159)
          .avatar
            position absolute
            vertical-align top
            top 16px
            right 0
            width 12px
            height 12px
            img
              vertical-align top
              width 12px
              height 12px
              border-radius 50%
        .content
          margin-top 6px
          .icon-thumb_up
            font-size 12px
            color rgb(0,160,220)
            line-height 24px
          .icon-thumb_down
            font-size 12px
            color rgb(147,153,159)
            line-height 24px
          .rating
            font-size 12px
            color rgb(7,17,27)
            line-height 16px
    .no-rating
      padding 16px 0
      margin 0 16px
      font-size 12px
      color rgb(147,153,159)
</style>
